<!--发布信息收集表-->
<!--CollentionList-->
<template>
  <div id="coll-list">
    <!-- 顶部 -->
    <div class="header">
      <component :is="header"></component>
    </div>
    <!-- 顶部end -->
    <!-- 内容start -->
    <div class="container">
      <!-- 顶部 start-->
      <el-row :gutter="5" class="coll-row1">
        <el-col :span="21">
          <h1 class="coll-title">编辑信息收集表</h1>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="release">发布</el-button>
        </el-col>
      </el-row>
      <!-- 顶部 end-->
      <!-- 中间 start-->
      <el-card>
        <div style="margin-top: 12px">
          <!-- 收集表标题、详情 start-->

          <el-row class="coll-title-row el-row-comment1">
            <el-col :span="12">
              <div class="coll-span1">
                <span>收集表名称</span>
              </div>
              <div class="coll-title-row-input1">
                <el-input v-model="getCollentionRelease.title" placeholder="标题"></el-input>
              </div>
            </el-col>
          </el-row>
          <el-row class="coll-title-row-input2 el-row-comment1">
            <el-col>
              <div class="coll-span1">
                <span>收集表详情</span>
              </div>
              <div>
                <ckeditor
                  :editor="editor"
                  v-model="getCollentionRelease.info"
                  :config="editorConfig"
                ></ckeditor>
              </div>
            </el-col>
          </el-row>
          <!-- 收集表标题、详情 end-->
          <!-- 强制填写 start-->

          <el-row class="el-row-comment1">
            <el-col :span="2">
              <div class="coll-span2">
                <span>强制填写</span>
              </div>
            </el-col>
            <el-col :span="4" style="padding-top:4px;">
              <el-radio-group
                v-model="getCollentionRelease.constraint"
                @change="changeConstraint()"
              >
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-col>
            <el-col :span="2">
              <div class="coll-span2">
                <span>发送邮件</span>
              </div>
            </el-col>
            <el-col :span="4" style="padding-top:4px;">
              <el-radio-group v-model="getCollentionRelease.sendEmail" @change="changeEmail()">
                <el-radio :label="1">是</el-radio>

                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-col>
            <el-col :span="2">
              <div class="coll-span2">
                <span>报名费</span>
              </div>
            </el-col>
            <el-col :span="4" style="padding-top:4px;">
              <el-radio-group @change="changePayment()" v-model="getCollentionRelease.payment">
                <el-radio :label="1">是</el-radio>

                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-col>

            <el-col :span="3" style="margin-top:-5px;margin-left:-50px;">
              <div v-show="showPayment">
                <el-input placeholder="请输入报名费" v-model="getCollentionRelease.price"></el-input>
              </div>
            </el-col>
          </el-row>

          <!-- 强制填写 end-->

          <!-- 选择班级start-->
          <el-row class="el-row-comment1">
            <el-col :span="14">
              <el-row>
                <el-col :span="4">
                  <div class="coll-span1">
                    <span>上传附件</span>
                  </div>
                </el-col>
                <el-col :span="20">
                  <div>
                    <el-upload
                      :auto-upload="true"
                      list-type="text"
                      :headers="headers"
                      name="attachment"
                      :show-file-list="true"
                      :action="uploadUrl"
                      :limit="1"
                    >
                      <el-button type="primary" style=" margin-top: -40px;">点击上传</el-button>
                    </el-upload>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="10">
              <el-row>
                <el-col :span="5">
                  <div class="coll-span1">
                    <span>选择班级</span>
                  </div>
                </el-col>

                <el-col :span="3">
                  <div>
                    <el-button
                      type="primary"
                      @click="dialogVisible = true,deleteOldClazzIds()"
                      style=" margin-top: -40px;"
                    >点击选择</el-button>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!--选择班级弹出框 -->
          <el-dialog title="选择需要填写的班级" :visible.sync="dialogVisible">
            <el-tree
              class="coll-el-tree"
              :data="CollegesData"
              show-checkbox
              v-model="getCollentionRelease.classList"
              default-expand-all
              node-key="CollegesData[].clazzId"
              ref="tree"
              @check-change="handleNodeClick"
              highlight-current
            ></el-tree>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="selectClazzsId">确 定</el-button>
            </span>
          </el-dialog>
          <!-- 选择班级 end-->

          <!-- 选择开始时间 结束时间 start-->

          <el-row class="el-row-comment1">
            <el-col :span="14">
              <div class="coll-span1">
                <span>选择开始时间</span>
              </div>
              <div class="coll-date">
                <el-date-picker
                  v-model="getCollentionRelease.startTime"
                  type="datetime"
                  placeholder="选择开始时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  @change="selectStartTime"
                ></el-date-picker>
              </div>
            </el-col>
            <el-col :span="10">
              <div class="coll-span1">
                <span>选择结束时间</span>
              </div>
              <div>
                <el-date-picker
                  v-model="getCollentionRelease.endTime"
                  type="datetime"
                  placeholder="选择结束时间"
                  @change="selectEndTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :disabled="Tiemdisabled"
                ></el-date-picker>
              </div>
            </el-col>
          </el-row>
          <!-- 选择开始时间 结束时间 end-->

          <!-- 基本信息 (默认信息)start-->
          <el-row class="el-row-comment1">
            <div class="coll-span1">
              <span>选择基本信息</span>
            </div>

            <!--  <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
            >全选</el-checkbox>-->
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group
              :indeterminate="isIndeterminate"
              v-model="getCollentionRelease.defaultOptionIds"
              @change="handleCheckedinfoOptionsChange"
            >
              <el-checkbox
                class="coll-el-checkbox"
                v-for="DefaultOption in DefaultOptions"
                :label="DefaultOption.type"
                :key="DefaultOption.type"
              >{{DefaultOption.title}}</el-checkbox>
            </el-checkbox-group>
          </el-row>

          <!-- 基本信息 end-->
          <!--自定义选项 start-->

          <div class="coll-span2">
            <span>设置收集表信息</span>
          </div>

          <el-form :model="getCollentionRelease">
            <el-row v-for="(domain, index) in getCollentionRelease.options" :key="domain.key">
              <!-- 标题-->
              <el-col :span="5">
                <el-form-item :prop="'options.' + index + '.title'">
                  <span>标题：</span>
                  <el-input v-model="domain.title" placeholder="标题"></el-input>
                </el-form-item>
              </el-col>
              <!-- 描述-->
              <el-col :span="12">
                <el-form-item :prop="'options.' + index + '.note'">
                  <span>描述：</span>

                  <el-input v-model="domain.note" type="textarea" placeholder="描述"></el-input>
                </el-form-item>
              </el-col>
              <!-- 是否必填-->
              <el-col :span="7">
                <el-form-item :prop="'options.' + index + '.constraint'">
                  <span>必填：</span>
                  <el-select placeholder="是否必填" v-model="domain.constraint">
                    <el-option
                      v-for="item in isOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                  <!-- 删除 -->

                  <i
                    class="el-icon-remove"
                    @click.prevent="removeDomain(domain)"
                    style="color:#409EFF;font-size:28px;"
                  ></i>

                  <!-- <svg class="icon-ying" aria-hidden="true" @click.prevent="removeDomain(domain)">
                    <use xlink:href="#icon-yingyong-" />
                  </svg>-->
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" @click="addDomain" size="mini" class="button-add">
                <i class="el-icon-plus"></i>
                添加
              </el-button>
              <!-- <svg class="icon" aria-hidden="true" @click="addDomain">
                <use xlink:href="#icon--" />
              </svg>-->
            </el-form-item>
          </el-form>

          <!--自定义选项 end-->
        </div>
      </el-card>
      <!-- 中间 end-->
    </div>
    <!-- 内容end -->
    <!-- 底部 -->
    <div class="footer">
      <component :is="footer"></component>
    </div>
    <!-- 底部end -->
  </div>
</template>
<script>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import TeacherHeader from "../../components/TeacherHeader.vue";
import Footer from "../../components/Footer.vue";
let cicToken = window.localStorage.getItem("cicToken");
let DefaultOptions = [];
export default {
  data() {
    return {
      uploadUrl:
        "http://172.18.84.23:8888/collection-service/collection/attachment/add/1?cicToken=adsdsds",
      fileList: [],
      headers: { cicToken: cicToken },
      // 选择班级弹出框
      dialogVisible: false,
      // 文件列表
      fileList: [],
      // 定义组件
      header: "TeacherHeader",
      footer: "Footer",
      // 引入富文本编辑器
      editor: ClassicEditor,
      // 富文本编辑器
      editorConfig: {
        // The configuration of the editor.
        language: "zh-cn", // 配置语言
        uiColor: "#FFF", // 背景颜色
        width: "auto", // 宽度
        height: "300px", // 高度
        skin: "office2003", // 界面v2,kama,office2003
        toolbarCanCollapse: false, // 工具栏是否可以被收缩
        resize_enabled: true, // 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js
        ckfinder: {
          uploaded: 1,
          url: "/"
          // 后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
        },
        toolbar: [
          "heading", //段落
          "|", //分隔
          "bold", //加粗
          "italic", //倾斜
          "bulletedList", //项目列表
          "numberedList", //编号列表
          "undo", //撤销
          "redo" //重做
        ] //工具栏显示
      },
      // 是否强制填写
      isOptions: [
        {
          value: "1",
          label: "是"
        },
        {
          value: "2",
          label: "否"
        }
      ],
      // 是否全选
      checkAll: false,
      // 获取的默认信息列表
      DefaultOptions: DefaultOptions,
      // 全选时的状态
      isIndeterminate: true,
      // 学院 班级 专业 列表参数信息
      CollegesData: [],
      // 查询出来的班级列表
      AllClazzs: [],
      // 开始时间
      Tiemdisabled: false,
      // 是否显示报名费
      showPayment: false,
      // 获取收集表填写的信息
      getCollentionRelease: {
        // 收集表标题
        title: "",
        //  收集表详情
        info: "",
        //  是否强制填写
        constraint: 2,
        // 是否发送邮件
        sendEmail: 2,
        // 是否交报名费
        payment: 2,
        // 报名费
        price: "",
        // 开始时间
        startTime: "",
        // 结束时间
        endTime: "",
        //班级ID集合，选中的ID下的班级才有权利填写当前收集表
        classList: new Array(),
        // 选中的基本信息id
        defaultOptionIds: [],
        options: [
          {
            title: "",
            note: "",
            constraint: ""
          }
        ]
      }
    };
  },
  created() {
    this.getDefaultOptions();
    this.getAllClazzs();
    // this.test();
  },
  methods: {
    deleteOldClazzIds() {
      this.getCollentionRelease.classList = new Array();
    },
    // 获取默认选项
    getDefaultOptions() {
      this.$get(this.$urlPath.collection + "/collection/defaultOptions/").then(
        resp => {
          if (resp.code != 200) {
            return this.$message.error(resp.message);
          }
          this.DefaultOptions = resp.data;
          let length1 = resp.data.length;
          for (let i = 0; i < length1; i++) {
            this.DefaultOptions[i] = JSON.parse(this.DefaultOptions[i]);
          }
        }
      );
    },
    // 默认选项
    handleCheckAllChange(val) {
      this.getCollentionRelease.defaultOptionIds = val
        ? this.DefaultOptions
        : [];
      console.log(this.getCollentionRelease.defaultOptionIds);
      this.isIndeterminate = false;
    },
    handleCheckedinfoOptionsChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === DefaultOptions.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.DefaultOptions.length;
    },
    // 获取所有班级
    getAllClazzs() {
      this.$get(this.$urlPath.school + "school/classes").then(resp => {
        if (resp.code != 200) {
          return this.$message.error(resp.message);
        }
        this.AllClazzs = resp.data;
        // console.log(resp);
        for (let i = 0; i < this.AllClazzs.length; i++) {
          this.CollegesData[i] = {
            id: this.AllClazzs[i].clazzId,
            label: this.AllClazzs[i].name
          };
        }
      });
    },
    // 选择开始时间
    selectStartTime() {
      if (
        this.getCollentionRelease.endTime != "" &&
        this.getCollentionRelease.startTime >= this.getCollentionRelease.endTime
      ) {
        this.$message.error("报名截止时间不能早于报名开始时间");
      }
    },
    // 选择结束时间
    selectEndTime() {
      if (this.getCollentionRelease.startTime == "") {
        this.$message.error("请记得选择开始时间");
      }
      if (
        this.getCollentionRelease.startTime != "" &&
        this.getCollentionRelease.startTime >= this.getCollentionRelease.endTime
      ) {
        this.$message.error("报名截止时间不能早于报名开始时间");
      }
    },
    // 是否强制填写
    changeConstraint() {
      this.getCollentionRelease.constraint = this.getCollentionRelease.constraint;
    },
    // 是否发送邮件
    changeEmail() {
      this.getCollentionRelease.sendEmail = this.getCollentionRelease.sendEmail;
    },
    // 是否需要支付报名费
    changePayment() {
      this.getCollentionRelease.payment = this.getCollentionRelease.payment;
      if (this.getCollentionRelease.payment == 1) {
        this.showPayment = true;
      } else {
        this.showPayment = false;
      }
    },
    // 点击班级属性控件时触发的事件
    handleNodeClick(v, e) {
      this.classLists = this.$refs.tree.getCheckedNodes();
    },
    // 确认选择班级
    selectClazzsId() {
      if (this.classLists == null) {
        this.$message.error("请选择需要填写的班级");
      } else if (this.classLists.length == 0) {
        this.$message.error("请选择需要填写的班级");
      } else {
        for (let i = 0; i < this.classLists.length; i++) {
          this.getCollentionRelease.classList.push(this.classLists[i].id);
        }

        this.dialogVisible = false;
        console.log(this.getCollentionRelease.classList);
      }
    },
    // 自定义选项
    // 删除
    removeDomain(item) {
      var index = this.getCollentionRelease.options.indexOf(item);
      if (index !== -1) {
        this.getCollentionRelease.options.splice(index, 1);
      }
    },
    // 添加
    addDomain() {
      this.getCollentionRelease.options.push({
        title: "",
        note: "",
        constraint: ""
      });
    },
    // 上传文件
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },

    // 发布信息收集表
    release() {
      this.$post_json(
        this.$urlPath.collection +
          "/collection/release?defaultOptionIds=" +
          this.getCollentionRelease.defaultOptionIds +
          "&clazzIds=" +
          this.getCollentionRelease.classList +
          "&sendEmail=" +
          this.getCollentionRelease.sendEmail,
        this.getCollentionRelease
        // this.getCollentionRelease
      ).then(resp => {
        if (resp.code != 200) {
          this.getCollentionRelease.classList = new Array();
          console.log(resp.message);
          // this.$refs.tree.setCheckedKeys([]);
          return this.$message.error(resp);
        }
        this.$router.push({ path: "/publishTable" });
        console.log(this.getCollentionRelease.classList);
      });
    }
  },
  // 注册组件
  components: {
    TeacherHeader,
    Footer
  }
};
</script>
<style lang="less">
// @import "../../assets/css/index.less";

#coll-list {
  @import "../../assets/less/coll-list.less";
  .button-add {
    width: 85px;
    height: 56px;
    margin-left: 38%;
    margin-top: 80px;
  }
}
</style>